<template>
  <div class="artilce-page flex flex-column h100">
    <div class="search-box">
      <router-link to="/search">
        <van-search
          disabled
          class="xlt-search"
          shape="round"
          background="transparent"
          placeholder="搜索：文章标题/疾病/关键词"
          v-model="keyWord"
        />
      </router-link>
      

      <div
        class="outher-dept"
        v-if="isDeptEmpty"
        @click="backClick"
      >
        <div>当前查看科室：{{ deptArticleInfo.name }}</div>
        <div class="text-right">
          返回{{ currentDept.departmentName }} <span class="iconfont iconjinru" />
        </div>
      </div>
    </div>
    
    <div class="article-list-view flex1 bg-white">
      <Article />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
import { useDeptArticle, useCurrentDeptInfo } from '@/hooks/store';
import Article from './components/Article';
export default {
  components: {
    Article
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const keyWord = ref(route.query.keyWord);
    const currentDept = useCurrentDeptInfo();
    const { deptArticleInfo, isDeptEmpty, setDeptArticle } = useDeptArticle();

    const backClick = () => {
      // 清空所进入的其他科室
      setDeptArticle({});
      router.replace('/education');
    };

    onBeforeRouteLeave(() => {
      isDeptEmpty && setDeptArticle({});
    });

    return { deptArticleInfo, isDeptEmpty, currentDept, keyWord, backClick };
  }
};
</script>

<style lang="scss" scoped>
.artilce-page {
  .search-box {
    padding: 20px 32px;
  }
}
.article-list-view {
  background: #fff;
  padding: 0 32px;
  overflow-y: auto;
}

.outher-dept {
  padding: 12px 0;
  font-size: 30px;
  font-weight: 500;
  color: #ffffff;
  line-height: 50px;
}
</style>